import { getEditor } from '@inbiz/utils'
import { RenderForm } from '@inbiz/render'
const NullPage = (props: { pageName: string }) => {
  return (
    <div
      style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
    >
      已绑定{props.pageName}页面,请预览查看
    </div>
  );
};

export const getLayoutBindUI = (page: { linkType: string; page: string; url: string }, props: any, active: string) => {
  const showIframe = page?.linkType == 'out';
  const showRenderFrom = (page?.linkType == 'in' || page?.linkType == undefined) && page?.page;
  const showPage = showIframe || showRenderFrom ? true : false;
  const PageArr = showRenderFrom ? page?.page?.split(',') : [];

  const __render = showIframe ? (
    <iframe
      width={'100%'}
      src={page.url}
      style={{
        border: 'none',
        boxShadow: 'none',
        height: 'calc(100% - 8px)',
        overflow: 'auto',
        display: active && active != '' ? 'none' : 'block'
      }}
    />
  ) : (
    showRenderFrom && (
      <>
        {getEditor() ? (
          <NullPage pageName={PageArr[2]} />
        ) : (
          <RenderForm
            type="page"
            globalSDK={props?.inbiz?.getGlobalSDK()}
            id={PageArr[0]}
            pageId={PageArr[0]}
          />
        )}
      </>
    )
  );
  return {
    showPage,
    render: __render,
  };
};
